import React from 'react';

import { Card, Form, DatePicker, Row, Col, Input, Button, Table, Alert } from 'antd';

import styles from './index.less';

const tabListNoTitle = [
  {
    key: 'article',
    tab: '我的红包',
  },
  {
    key: 'app',
    tab: '使用记录',
  }
];

class ArticleModule extends React.Component{
	render(){
		return (
			<div>
	      		<div className={styles.ul_item}>
	      			<div className={styles.li_item}>
	      				<div className={styles.left}>
	      					<div className={styles.number}>
	      						<span style={{fontSize: 16,fontWeight: '600'}}>¥</span>
	      						121.00
	      					</div>
	      				</div>
	      				<div className={styles.right}>
	      					<div className={styles.title}>注册红包</div>
	      					<div className={styles.info}>到期时间：2021-02-28 10:00:07</div>
	      				</div>
	      			</div>
	      		</div>
	      		<div>
	      			<Alert style={{marginBottom: 10}} message="1. 获得红包后请在规定的时间内使用，超出使用日期红包将自动失效。" type="info" showIcon />
	      			<Alert style={{marginBottom: 10}} message="2. 不同红包类型使用规则有所不同，具体请以结算时系统显示为准。" type="info" showIcon />
	      			<Alert message="3. 红包抵扣金额不纳入可开票金额。" type="info" showIcon />
	      		</div>
	      	</div>
		)
	}
}

const columns = [
	{
	    title: '时间',
	    dataIndex: 'age',
	    key: 'age',
	    width: 250,
	    render: (text, record) => {
	    	return '2020-12-31 15:57:10'
	    }
	},
	{
	    title: '红包种类',
	    dataIndex: 'age',
	    key: 'age',
	    width: 130,
	    render: (text, record) => {
	    	return '注册红包'
	    }
	},
	{
	    title: '资金类型',
	    dataIndex: 'age',
	    key: 'age',
	    width: 130,
	    render: (text, record) => {
	    	return '退稿返还'
	    }
	},
	{
	    title: '余额变动',
	    dataIndex: 'age',
	    width: 130,
	    key: 'age',
	    render: (text, record) => {
	    	if((record.key % 2) === 0){
	        return <span style={{color: '#f73131'}}>+1.60</span>
	      }else{
	        return <span style={{color: '#2440b3'}}>-1.60</span>
	      }
    	 
	    }
	},
	{
	    title: '红包余额',
	    dataIndex: 'age',
	    width: 130,
	    key: 'age',
	    render: (text, record) => {
	    	return '121.00'
	    }
	},
	{
	    title: '备注',
	    dataIndex: 'age',
	    key: 'age',
	    render: (text, record) => {
	    	return '订单号：05672-1，红包退款：1元'
	    }
	},
];

let tableData = [];

for(let i=0;i<100;i++){
	tableData.push({key: i})
}

class AppModule extends React.Component{
	render(){
		return (
			<div>
				<Table columns={columns} dataSource={tableData} />
			</div>
		)
	}
}

const contentListNoTitle = {
	article: <ArticleModule/>,
	app: <AppModule/>
}



export default class Message extends React.Component{
	state = {
	    key: 'tab1',
	    noTitleKey: 'article',
	};
	render(){
		return (
			<>
				<div style={{background: '#fff',padding: '30px 24px 30px',marginBottom: '20px' }}>
					<ul className={styles.itemBox}>
						<li className={styles.item}>
							<div className={styles.title}>可用红包总额（元）</div>
							<div className={styles.number} style={{color: '#ff7a03'}}>0.00</div>
						</li>
						<li className={styles.item}>
							<div className={styles.title}>已用红包金额（元）</div>
							<div className={styles.number}>67.00</div>
						</li>
					</ul>
				</div>
				<Card
		          style={{ width: '100%' }}
		          tabList={tabListNoTitle}
		          activeTabKey={this.state.noTitleKey}
		          onTabChange={key => {
		            this.setState({noTitleKey: key})
		          }}
		        >
		          	{
		          		contentListNoTitle[this.state.noTitleKey]
		          	}
		        </Card>
		    </>
		)
	}
}








